//进入的动画
.in-rotate {
    animation: inRotate $presto ease;
}

.in-top {
    animation: inTop $vivo ease;
}

.in-bottom {
    animation: inBottom $presto ease;
}

.in-pop {
    animation: inPop $vivo ease;
}

.in-left {
    animation: inLeft $presto ease-in;
}

//退出的动画
.out-left {
    animation: outLeft $presto ease-in;
}

.out-bottom {
    animation: outBottom $presto ease-in;
}

.out-top {
    animation: outTop $presto ease-in;
}

.out-opacity {
    animation: outOpacity $vivo ease;
}

//悬停的动画
.blink-theme {
    &:hover {
        cursor: pointer;
        animation: blinkTheme $largo ease;
    }
}

.blink-alert {
    &:hover {
        cursor: pointer;
        animation: blinkAlert $largo*2 ease;
    }
}

.blink-wave {
    &:hover {
        cursor: pointer;
        animation: blinkWave $largo/2 linear;
    }
}

.blink-reverse {
    &:hover {
        cursor: pointer;
        animation: blinkReverse $largo*2 ease;
    }
}

// 冻结的动画
.pause-blur {
    filter: blur(3px);
    transition: transform $presto linear;
    transition-delay: $presto;
    transform: scale(0.95);
}

//关键帧
@keyframes blinkTheme {
    0% {
        background-color: $bg-color-front;
        color: $color-primary;
    }
    50% {
        background-color: rgba($color-theme, 0.1);
    }
    100% {
        background-color: $bg-color-front;
    }
}

@keyframes blinkAlert {
    0% {
        background-color: transparent;
        color: $color-secondary;
    }
    50% {
        background-color: $bg-color-alert;
        color: $color-reverse;
    }
    100% {
        background-color: transparent;
        color: $color-secondary;
    }
}

@keyframes blinkReverse {
    0% {
        background-color: transparent;
        color: $color-theme;
    }
    50% {
        background-color: $color-theme;
        color: $color-reverse;
    }
    100% {
        background-color: transparent;
        color: $color-theme;
    }
}


/*灰色按钮波纹动画*/

@keyframes blinkWave {
    0% {
        background-image: radial-gradient(0 at center, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.05) 55%);
    }
    25% {
        background-image: radial-gradient(32px at center, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.05) 55%);
    }
    50% {
        background-image: radial-gradient(48px at center, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.05) 55%);
    }
    75% {
        background-image: radial-gradient(80px at center, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.05) 55%);
    }
    100% {
        background-image: radial-gradient(96px at center, rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.05) 55%);
    }
}


/*向上滑*/

@keyframes inTop {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}


/*滑下*/

@keyframes inBottom {
    0% {
        transform: translateY(-20rem);
    }
    100% {
        transform: translateY(0);
    }
}


/*左滑入*/

@keyframes inLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateY(0);
    }
}


/*左滑出*/

@keyframes outLeft {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


/*下滑出*/

@keyframes outBottom {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}


/*上滑出*/

@keyframes outTop {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}


/*翻转*/

@keyframes inRotate {
    0% {
        transform: rotateX(-180deg) translateY(10px);
    }
    100% {
        transform: rotateX(0deg) translateY(0px);
    }
}

@keyframes outOpacity {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/*弹出*/

@keyframes inPop {
    0% {
        opacity: 0.5;
        transform: scale(0.6);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
